<template>
    <div style="padding: 10px 20px 10px 20px;" class="content" v-loading="dataLoading">
        <div class="search-area">
            <Row :gutter="20">
                <i-col span="5">
                    <Input placeholder="根据投诉内容查询" v-model="searchForm.searchKey" @on-enter="search">
                        <Icon slot="prefix" type="ios-cart-outline" />
                    </Input>
                </i-col>
                <i-col span="5">
                    <Select placeholder="事项类别" clearable filterable v-model="searchForm.matterCode">
                        <i-option v-for="(item, index) in dictInfo.eventCategoryList" :key="index" :value="item.dictValue" style="">{{ item.dictName }}</i-option>
                    </Select>
                </i-col>
                <i-col span="5" style="margin-right:20px">
                    <Select placeholder="回复状态" clearable filterable v-model="searchForm.replyStatus">
                        <i-option v-for="(item, index) in statusList" :key="index" :value="item.value">{{ item.text }}</i-option>
                    </Select>
                </i-col>
                <i-col span="4">
                    <Button class="search-btn" @click="search">查询</Button>
                    <Button class="search-btn" @click="reset">重置</Button>
                </i-col>
            </Row>
        </div>
        <el-empty description="暂无数据" v-if="feedbackList.length == 0" :image-size="200"></el-empty>
        <Card class="data-card card-word" v-for="item in feedbackList" :key="item.id">
            <div slot="title">
                <div class="card-title">
                    <p>
                        {{ $utils.handleDictData(item.matterCode, dictInfo.eventCategoryList) }} {{ item.businessNum }}
                    </p>
                    <p class="flex-class">服务工单号：<span>{{ item.backCode }}</span></p>
                    <p class="flex-class">创建时间：
                        <span>{{ $utils.timestampToDateTimeSecond(item.createdDate) }}</span>
                    </p>
                    <!-- <div v-if="item.replyStatus == 1" :type="item.replyStatus === 1 ? 'success' : 'warning'" style="background: rgb(111,199,123);position:absolute; right:-5px; top:-2px;width:80px;font-size:14px;line-height: 30px;height:30px;border-radius:0px 0px 0px 30px;font-weight:bold;text-align:center">{{ item.replyStatus === 1 ? '已回复' : '未回复' }}</div>
                    <div v-else :type="item.replyStatus === 1 ? 'success' : 'warning'" style="background: #ff9900;position:absolute; right:-5px; top:-2px;width:80px;font-size:14px;line-height: 30px;height:30px;border-radius:0px 0px 0px 30px;font-weight:bold;text-align:center">{{ item.replyStatus === 1 ? '已回复' : '未回复' }}</div> -->
                    <div v-if="item.replyStatus == 1" type="success" style="background: rgb(111,199,123);position:absolute; right:-5px; top:-2px;width:80px;font-size:14px;line-height: 30px;height:30px;border-radius:0px 0px 0px 30px;font-weight:bold;text-align:center">已回复</div>
                    <div v-if="item.replyStatus == 0" type='warning' style="background: #ff9900;position:absolute; right:-5px; top:-2px;width:80px;font-size:14px;line-height: 30px;height:30px;border-radius:0px 0px 0px 30px;font-weight:bold;text-align:center">未回复</div>
                    <div v-if="item.replyStatus == 2" type='warning' style="background: #f50;position:absolute; right:-5px; top:-2px;width:100px;font-size:14px;line-height: 30px;height:30px;border-radius:0px 0px 0px 30px;font-weight:bold;text-align:center">已反馈上级</div>
                </div>
            </div>
            <p>业务单概况</p>
            <Divider style="margin-top: 10px; margin-bottom: 10px" />
            <Row v-if="item.matterCode === '1'" class="card-word">
                <i-col span="6">
                    <p>合同类型: <span>{{ item.businessType }}</span></p>
                </i-col>
                <i-col span="6">
                    <p>上游供货商: <span>{{ item.entrustedEnterprise }}</span></p>
                </i-col>
                <i-col span="3">
                    <p>合同品类: <span>{{ item.matType }}</span></p>
                </i-col>
                <i-col span="3">
                    <p>合同重量: <span>{{ item.measureQtyAgmt }}</span></p>
                </i-col>
                <i-col span="6">
                    <p>合同金额: <span>{{ item.htTotalAmount }}</span></p>
                </i-col>
            </Row>

            <Row v-if="item.matterCode === '2'" class="card-word">
                <i-col span="6">
                    <p>流转类型: <span>{{ item.transType }}</span></p>
                </i-col>
                <i-col span="6">
                    <p>结算金额: <span>{{ item.lzTotalAmount }}</span></p>
                </i-col>
            </Row>

            <Row v-if="item.matterCode === '3'" class="card-word">
                <i-col span="6">
                    <p>预计到港时间: <span>{{ item.estimateDate }}</span></p>
                </i-col>
                <i-col span="6">
                    <p>箱型箱量: <span>{{ item.boxType }}</span></p>
                </i-col>
                <i-col span="6">
                    <p>抵运港: <span>{{ item.arrivalPier }}</span></p>
                </i-col>
            </Row>
            <Row v-if="item.matterCode === '5'" class="card-word">
                <i-col span="4">
                    <p>货主: <span>{{ item.customerName }}</span></p>
                </i-col>
                <i-col span="4">
                    <p>提单号: <span>{{ item.billOfLandingNo }}</span></p>
                </i-col>
                <i-col span="3">
                    <p>箱号: <span>{{ item.businessItem }}</span></p>
                </i-col>
                <i-col span="3">
                    <p>品名: <span>{{ item.matName }}</span></p>
                </i-col>
                <i-col span="3">
                    <p>入库日期: <span>{{ item.dateInto }}</span></p>
                </i-col>
                <i-col span="3">
                    <p>送货车号: <span>{{ item.carNo }}</span></p>
                </i-col>
                <i-col span="4">
                    <p>作业要求: <span>{{ item.operationRequirements }}</span></p>
                </i-col>
            </Row>
            <Row v-if="item.matterCode === '6'" class="card-word">
                <i-col span="4">
                    <p>货主: <span>{{ item.customerName }}</span></p>
                </i-col>
                <i-col span="4">
                    <p>箱号: <span>{{ item.businessItem }}</span></p>
                </i-col>
                <i-col span="4">
                    <p>品名: <span>{{ item.matName }}</span></p>
                </i-col>
                <i-col span="3">
                    <p>出库日期: <span>{{ item.outStartDate }}</span></p>
                </i-col>
                <i-col span="3">
                    <p>提货车号: <span>{{ item.carNo }}</span></p>
                </i-col>
                <i-col span="6">
                    <p>作业要求: <span>{{ item.operationRequirements }}</span></p>
                </i-col>
            </Row>
            <Row v-if="item.matterCode === '7'" class="card-word">
                <i-col span="4">
                    <p>原货主: <span>{{ item.ownerName }}</span></p>
                </i-col>
                <i-col span="4">
                    <p>新货主: <span>{{ item.newOwnerName }}</span></p>
                </i-col>
                <i-col span="4">
                    <p>原结算客户: <span>{{ item.settlementCustomerName }}</span></p>
                </i-col>
                <i-col span="3">
                    <p>新结算客户: <span>{{ item.newSettlementCustomerName }}</span></p>
                </i-col>
                <i-col span="3">
                    <p>箱号: <span>{{ item.wmsBatchNum }}</span></p>
                </i-col>
                <i-col span="3">
                    <p>货转日期: <span>{{ item.createdTime }}</span></p>
                </i-col>
                <i-col span="3">
                    <p>品名: <span>{{ item.matName }}</span></p>
                </i-col>
            </Row>
            <Row v-if="item.matterCode === '8'" class="card-word">
                <i-col span="6">
                    <p>分色类型: <span>{{ item.businessType }}</span></p>
                </i-col>
                <i-col span="6">
                    <p>分色日期: <span>{{ item.dateStart }}</span></p>
                </i-col>
                <i-col span="6">
                    <p>分色前品名: <span>{{ item.matName }}</span></p>
                </i-col>
                <i-col span="6">
                    <p>分色后品名: <span>{{ item.matNameOld }}</span></p>
                </i-col>
            </Row>
            <p>投诉内容</p>
            <Row style="margin-left: 60px">
                <i-col span="20">
                    <span>{{ item.backContent }}</span>
                </i-col>
                <i-col span="4" style="text-align: right;">
                    <p v-if="item.replyStatus !== 2" class="speedOfProgress" style="position:relative;top:-10px" @click="superiorFeedback(item)">
                        上级反馈<i class="el-icon-position"></i>
                    </p>
                    <p class="speedOfProgress" @click="speedOfProgressClick(item)">
                        查看反馈<Icon type="ios-arrow-down" :class="item.arrowClass" />
                    </p>
                </i-col>
            </Row>

            <el-collapse-transition>
                <div v-if="item.speedOfProgressShow" style="margin-top: 10px">
                    <p>反馈信息</p>
                    <Divider style="margin-top: 10px; margin-bottom: 10px" />
                    <div style="margin-left: 50px">
                        <div style="display: flex">
                            <p>描述: </p>
                            <div style="background-color: #f4f7fa; width: 70%; min-height: 50px; margin-left: 20px; padding: 10px">
                                {{ item.handleContent }}
                            </div>
                        </div>
                        <div style="display: flex; margin-top: 20px">
                            <p>经办人 </p>
                            <div style="display: flex; width: 50%; justify-content: space-between">
                                <p style="margin-left: 20px">姓名: <span>{{ item.handleName }}</span></p>
                                <p>电话: <span>{{ item.handleTel }}</span></p>
                                <p>邮箱: <span>{{ item.handleEml }}</span></p>
                            </div>
                        </div>
                    </div>
                </div>
            </el-collapse-transition>
        </Card>
    </div>
</template>

<script>
import api from '@/api/feedback';
import baseCodeApi from '@/api/baseCode';
export default {
    name: 'feedbackList',
    data() {
        return {
            statusList: [{
                value: 1,
                text: '已回复'
            },{
                value: 0,
                text: '未回复'
            },{
                value: 2,
                text: '已反馈上级'
            }],
            searchForm: {
                replyStatus: '',
                matterCode: '',
                searchKey: ''
            },
            arrowClass: '',
            dataLoading: false,
            speedOfProgressShow: false,
            feedbackList: [],
            dictInfo: {
                eventCategoryList: [],
                customerId: []
            }
        };
    },
    methods: {
        superiorFeedback(row){
            this.dataLoading = true;
            api.feedbackSendEmail(row.id).then(({ data }) => {
                if (data.returnCode === 200) {
                    this.$Message.success('已将您的投诉内容直接反馈给主管领导，将尽快给您回复。');
                    this.search();
                } else {
                    this.$Message.error(data.returnMsg);
                }
            }).finally(() => {
                this.dataLoading = false;
            })
        },
        reset() {
            this.searchForm = {
                replyStatus: '',
                matterCode: '',
                searchKey: ''
            };
            this.initData();
        },
        search() {
            this.initData();
        },
        initData() {
            this.dataLoading = true;
            let body = {
                pageIndex: 1,
                pageSize: 10000,
                replyStatus: this.searchForm.replyStatus,
                matterCode: this.searchForm.matterCode,
                searchKey: this.searchForm.searchKey
            }
            api.selectPage(body).then(({ data }) => {
                if (data.returnCode === 200) {
                    data.returnData.records.forEach(x => {
                        x.arrowClass = '';
                        x.speedOfProgressShow = false;
                    });
                    this.feedbackList = data.returnData.records;
                } else {
                    this.$Message.error(data.returnMsg);
                }
            }).finally(() => {
                this.dataLoading = false;
            });
        },
        getDictData() {
            // 字典
            baseCodeApi.getDictDataByDictTypeList([
                'MATTER_CODE'
            ]).then(({ data }) => {
                if (data.returnCode === 200) {
                    const { returnData } = data;
                    this.dictInfo.dictArr = returnData;
                    this.dictInfo.eventCategoryList = returnData.filter(item => item.dictType === 'MATTER_CODE');
                } else {
                    this.$Message.error(data.returnMsg);
                }
            }).catch(err => {
                console.log(err);
            });
        },
        speedOfProgressClick(item) {
            item.speedOfProgressShow = !item.speedOfProgressShow;
            if (item.speedOfProgressShow) {
                item.arrowClass = 'top-arrow';
            } else {
                item.arrowClass = 'bottom-arrow';
            }
        },
        speedOfProgressClicks(item) {
            console.log(item)
        },
    },
    mounted() {
        this.getDictData();
        this.initData();
    }
};
</script>

<style scoped lang="less">

.flex-class {
    display: flex;
    align-items: center;
    justify-content: center;
}
.card-title {
    display: flex;
    width: 80%;
    text-align: center;
    height: 30px;
    p {
        border-right: 1px solid #d9d9d9 !important;
        height: 30px;
        line-height: 30px;
        span {
            font-weight: normal;
        }
    }
    p:first-child {
        text-align: left;
    }
    p:first-child, p:last-child {
        border: none;
    }
}
.card-word {
    margin-bottom: 20px;
    p {
        font-weight: 700;

        span {
            font-weight: 500;
        }
    }
}
.content {
    background-color: #f4f7fa;
    padding: 10px 20px 10px 20px;
    min-height: 100vh;
}
.speedOfProgress {
    cursor: pointer;
}

@keyframes arrowChange {
    100% {
        transform: rotate(180deg);
    }
}
@keyframes arrowChange2 {
    100% {
        transform: rotate(0);
    }
}
.speedOfProgress {
    cursor: pointer;
}
.top-arrow {
    animation: arrowChange .5s;
    animation-fill-mode: forwards;
    transform: rotate(0);
}
.bottom-arrow {
    animation: arrowChange2 .5s;
    animation-fill-mode: forwards;
    transform: rotate(180deg);
}
.search-area {
    width: 100%;
    padding: 10px 15px;
    .search-btn {
        background-color: #4f68e8;
        color: #fff;
        width: 40%;
        max-width: 120px;
    }
    .add-btn {
        background-color: #3e4c64;
        color: #fff;
        margin-left: 5%;
        width: 40%;
        max-width: 120px;
    }
}
</style>
